<!--
 * @Date: 2023-07-10 17:16:57
 * @LastEditTime: 2024-01-29 17:21:42
 * @Description: content
-->
<template>
  <uni-popup ref="_rule_pop" type="center" @change="popChange">
    <!-- 公告弹窗 -->
    <view
      v-if="noticeCheck"
      class="_notice_pop c_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc17.png')})`
      }"
    >
      <view class="_notice_pop_hd">{{ ruleData.title }}</view>

      <view class="_notice_pop_bd">
        <scroll-view
          scroll-y
          :style="{
            height: `100%`
          }"
        >
          <view v-html="ruleData.content"></view>
        </scroll-view>
      </view>

      <view
        v-if="noticeCheck"
        class="check-btn"
        @click="todayHide = !todayHide"
      >
        <view class="icon">
          <image
            v-if="todayHide"
            :src="$img('/static/img2/cc44.png')"
            lazy-load
          ></image>

          <image v-else :src="$img('/static/img2/cc45.png')" lazy-load></image>
        </view>

        今日不再提醒
      </view>

      <view class="close icon" @click="close">
        <image :src="$img('/static/img2/cc43.png')" lazy-load></image>
      </view>
    </view>

    <!-- 规则弹窗 -->
    <view
      v-else
      class="_rule_pop c_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc42.png')})`
      }"
    >
      <view class="_rule_pop_title">{{ ruleData.title }}</view>

      <scroll-view
        scroll-y
        class="_rule_pop_bd"
        :class="{
          'has-check': noticeCheck
        }"
      >
        <view v-html="ruleData.content"></view>
      </scroll-view>

      <view class="close icon" @click="close">
        <image :src="$img('/static/img2/cc43.png')" lazy-load></image>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  props: {
    noticeCheck: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      ruleData: '',
      todayHide: false
    }
  },

  mounted() {
    console.log(this.noticeCheck)
  },

  methods: {
    popChange({ show }) {
      if (!show) {
        if (this.todayHide) {
          uni.setStorageSync('_last_notice_date', this.$c.getDateTime())
        }
      }
    },

    close() {
      this.$refs._rule_pop.close()
    },

    open(opt) {
      this.ruleData = opt

      this.$refs._rule_pop.open()
    },

    async getRule(id, title = '') {
      let res = await this.$c.getRule(id, true)

      this.open({
        title: title,
        content: res.data
      })
    }
  }
}
</script>

<style lang="scss">
._rule_pop {
  width: 690rpx;
  height: 882rpx;
  box-sizing: border-box;
  padding: 0 90rpx 60rpx;

  ._rule_pop_title {
    // padding: 40rpx 0;
    // text-align: center;

    // font-size: 32rpx;
    // font-family: Source Han Sans CN;
    // font-weight: 500;
    // color: #ffffff;
    height: 170rpx;
    opacity: 0;
  }

  ._rule_pop_bd {
    width: 478rpx;
    height: 640rpx;

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;

    &.has-check {
      height: 620rpx;
    }
  }
  .icon {
  }

  .close {
    width: 196rpx;
    height: 78rpx;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 120%);
  }
}
.c_bg {
}

._notice_pop {
  width: 594rpx;
  height: 630rpx;

  ._notice_pop_hd {
    text-align: center;
    padding: 30rpx 0 30rpx;

    font-family: 光良酒-干杯体, 光良酒-干杯体;
    font-weight: 400;
    font-size: 32rpx;
    color: #ffffff;
    text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
  }

  ._notice_pop_bd {
    width: 540rpx;
    height: 450rpx;
    margin: 0 auto;
    // background: #252525;

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #fff;
  }

  .check-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 0 0;

    font-size: 24rpx;
    color: #fff;

    .icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .close {
    width: 196rpx;
    height: 78rpx;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 120%);
  }
  .icon {
  }
}
</style>
